<template>
	<view class="container">
		<view class="page_title">组件库demo展示</view>
		<view class="item">
			<button 
				class="item_btn" 
				type="default" 
				v-for="(item,index) in componentsList" 
				:key="item.name"
				@tap="changePage(item.url)"
			>{{item.name}}</button>
		</view>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				componentsList: [
					{
						url: '../demo/navbar',
						name: '自定义导航栏'
					},
					{
						url: '../demo/kerText',
						name: '文本展开与收起'
					},
					{
						url: '../demo/swiper',
						name: '多功能轮播图'
					},
					{
						url: '../demo/calendar',
						name: '日历'
					},
					{
						url: '../demo/search',
						name: '搜索'
					},
					{
						url: '../demo/goTop',
						name: '返回顶部'
					},
					{
						url: '../demo/kerToast',
						name: 'Toast轻提示'
					},
					{
						url: '../demo/kerTfggVerify',
						name: '滑动验证'
					},
					{
						url: '../demo/kerCountdownVerify',
						name: '验证码倒计时'
					},
					{
						url: '../demo/kerTabs',
						name: 'Tab标签页'
					},
					// {
					// 	url: '../demo/kerCollapse',
					// 	name: '折叠面板'
					// },
					{
						url: '../demo/kerNotice',
						name: '通知公告'
					},
					{
						url: '../demo/module',
						name: '可拖动顶部选项卡'
					},
					{
						url: '../demo/kerCitySelect',
						name: '城市选择+搜索'
					},
					{
						url: '../demo/kerAnchor',
						name: '导航锚点定位'
					},
					// {
					// 	url: '../demo/kerList',
					// 	name: '列表'
					// },
					{
						url: '../demo/sign-in',
						name: '签到'
					},
					{
						url: '../demo/kerLazyLoad',
						name: '懒加载'
					},
					{
						url: '../demo/kerFengFlow',
						name: '瀑布流'
					},
					{
						url: '../demo/kerNoData',
						name: '暂无数据'
					},
					{
						url: '../demo/ker-address',
						name: '收货地址编辑'
					},
				]
			}
		},
		methods: {
			changePage(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		padding: 20rpx 50rpx;
		box-sizing: border-box;
		.page_title{
			text-align: center;
		}
		.item_btn {
			position: relative;
			font-size: 14px;
			text-align: left;
			font-weight: bold;
			border-radius: 20px;
			padding: 0 20px;
			color: #333;
			background-color: #f5f5f5;
			margin-top: 10px;
		
			&::before {
				content: '';
				position: absolute;
				right: 20px;
				top: 50%;
				margin-top: -5px;
				width: 7px;
				height: 7px;
				border-top: 2px solid #969696;
				border-right: 2px solid #969696;
				transform: rotate(45deg);
			}
		
			&::after {
				border: none;
			}
		}
	}
		


</style>
